<template>
    <div class="ordersDiv">
        <menu>
            <el-menu
                heigth="30px"
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                :router="true"
            >
                <el-menu-item
                    index="/adminsSystem/orders/ordersList"
                    @click="setState"
                    >订单列表</el-menu-item
                >
                <el-menu-item
                    index="/adminsSystem/orders/ordersList/"
                    @click="state = 4"
                    >已完成订单</el-menu-item
                >
                <el-menu-item
                    index="/adminsSystem/orders/ordersList/"
                    @click="state = 3"
                    >失效订单</el-menu-item
                >
            </el-menu>
            <div class="content">
                <router-view :state="state"></router-view>
            </div>
        </menu>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapMutations, mapState } = createNamespacedHelpers(
    "orders"
);
export default {
    data() {
        return {
            activeIndex: "1",
            activeIndex2: "1",
            state: "", //判断页面选择展示订单状态，state=4已完成订单，state=3已取消的失效订单
        };
    },
    methods: {
        ...mapActions(["getOrders"]),
        handleSelect(key, keyPath) {
            // console.log(key, keyPath);
            console.log(this.state);
        },
        //组件方法，选择渲染当前用户所有订单 写在这里 改变this.state 后再次获取
        setState() {
            this.state = "";
            this.getOrders();
        },
    },
};
</script>

<style lang="scss">
.ordersDiv {
    .content {
        width: 100%;
        height: auto;
    }
}
</style>